<template>
  <div>
    <div :style="{opacity:opacity/100}">显隐效果</div>
    <ul>
      <li>news001 <input type="text"
               name="q"
               id=""></li>
      <li>news002 <input type="text"
               name="q"
               id=""></li>
      <li>news003 <input type="text"
               name="q"
               id=""></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'News',
  data() {
    return {
      opacity: 50,
    }
  },
  mounted() {
    console.log('new mounted')
  },
  beforeDestroy() {
    console.log('new Destroy')
  },
  //当前路由处于激活状态调用
  activated() {
    console.log('激活')
    this.timer = setInterval(() => {
      console.log('interval')
      this.opacity -= 3
      if (this.opacity <= 0) {
        this.opacity = 100
      }
    }, 1000 / 24)
  },
  // 失活
  deactivated() {
    console.log('失活')
    clearInterval(this.timer)
  },
}
</script>

<style>
</style>